<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <div id="main" style="width: 650px;height: 100px; margin-left: 240px;"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <div id="main1" style="width: 600px;height:400px;"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <div id="main2" style="width: 600px;height:400px;"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import adminApi from "@/api/adminApi";
import {onMounted, reactive, watch, ref, onBeforeUnmount, shallowRef} from 'vue'
import * as echarts from "echarts"

const username = ref("")

function getLoginInfo() {
  adminApi.getInfo()
      .then(resp => {
        //console.log(resp.data.username);
        username.value = resp.data.username
      })
}

getLoginInfo()


onMounted(async () => {
  setTimeout(() => {
    bbb();
    aa();
    bb()
  }, 100);
})

function bbb() {
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    graphic: {
      elements: [
        {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: "欢迎" + username.value + "登录",
            fontSize: 60,
            fontWeight: 'bold',
            lineDash: [0, 300],
            lineDashOffset: 0,
            fill: 'transparent',
            stroke: '#000',
            lineWidth: 1
          },
          keyframeAnimation: {
            duration: 3000,
            loop: true,
            keyframes: [
              {
                percent: 0.7,
                style: {
                  fill: 'transparent',
                  lineDashOffset: 300,
                  lineDash: [300, 0]
                }
              },
              {
                // Stop for a while.
                percent: 0.7,
                style: {
                  fill: 'transparent'
                }
              },
              {
                percent: 0.7,
                style: {
                  fill: 'yellow'
                }
              }
            ]
          }
        }
      ]
    }
  };

  option && myChart.setOption(option);
}

const aa = () => {
  let name = [];
  let count = [];
  adminApi.top5Dept()
      .then(resp => {
        //console.log(resp.data)
        for (let index = 0; index < resp.data.length; index++) {
          name[index] = resp.data[index].name;
          count[index] = resp.data[index].count;
        }
        var chartDom = document.getElementById('main1');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: '热门商品展示Top5',
            textStyle: {
              color: "#000"
            }
          },
          xAxis: {
            type: 'category',
            data: name,
            axisLabel: {
              interval: 0
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: count,
              type: 'bar'
            }
          ]
        };
        option && myChart.setOption(option);
      })
}


const bb = () => {
  let name = [];
  let count = [];
  adminApi.userOrder()
      .then(resp => {
        console.log(resp.data);
        for (let index = 0; index < resp.data.length; index++) {
          name[index] = resp.data[index].username;
          count[index] = resp.data[index].count;
        }
        //console.log(name)
        //console.log(count)
        var chartDom = document.getElementById('main2');
        var myChart = echarts.init(chartDom);
        var option;

        // 使用 map 函数将两个数组合并为一个对象数组
        const data = count.map((value, index) => {
          return {
            value: value,
            name: name[index]
          };
        });

        option = {
          title: {
            text: '用户订单数量比例',
            subtext: 'Number Chart',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Order Number',
              type: 'pie',
              radius: '50%',
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        option && myChart.setOption(option);
      })
}
</script>

<style scoped>

</style>